<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>个人主页</title>
	<meta name="keywords" content="个人网站" />
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
	<!-- 引入自定义样式 -->
	<link rel="stylesheet" type="text/css" href="css/customStyle.css" />

	<!-- layui核心css文件 -->
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
	<link href="css/prettify.css" rel="stylesheet" type="text/css" media="all">

	<!-- jquery核心文件 -->
	<script type="application/javascript" src="js/jquery-3.6.0.min.js"></script>
	<!-- layui核心js -->
	<script src="layui/layui.js" charset="utf-8"></script>

	<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
	<script type="text/javascript" src="js/base.js"></script>
	<script type="text/javascript" src="js/prettify.js"></script>
	<!-- 引入layui处理js -->
	<script src="js/layuiContro.js" type="text/javascript" charset="utf-8"></script>
	<!-- 图片放大处理js -->
	<script src="js/picContro.js" type="application/javascript"></script>

	<style type="text/css">
		body {
			position: relative;
			background-image: url("images/bg.jpeg");
			text-align: center;
		}
		audio{
			height: 0;
		}
	</style>

</head>
<body>
	<!-- 定义画布标签 -->
	<canvas id="canvas"></canvas>

	<!-- 顶部部分 -->
	<div class="main">
		<div class="headimg">
			<img src="images/default.jpg" class="xwcms" onmouseover="this.src='images/hometown/tree.jpeg'"
				onmouseout="this.src='images/default.jpg'" />
		</div>
		<div class="caption" onclick="musicPlay()">
			<a style="color:white;">大老师°</a>
		</div>
		<div class="des">
			<span style="color: #2D93CA;">我的名字：“赵老敢”</span>
			<span style="color: #FFB800;">座右铭：生活需要态度</span>
			<div class="menu" style="color: #EB7350;">
				特点:<span>阳光</span>/<span>健康</span>/<span>有点帅</span>/<span>简约生活派</span>
			</div>
			<!-- 音频部分 -->
			<audio src="songs/周杰伦%20-%20七里香（钢琴版）.mp3" controls="controls" autoplay=true id="one" hidden></audio>
			<audio src="songs/文武贝%20-%20晴天%20(钢琴版).mp3" controls="controls" hidden></audio>
			<audio src="songs/5音%20-%20花海（钢琴版）%20(改编版原唱_%20周杰伦).mp3" controls="controls" hidden></audio>
		</div>
	</div>


	<!-- 核心内容 -->
	<div class="layui-container" id="content">
		<fieldset class="layui-elem-field layui-field-title layui-font-gray" style="margin-top: 50px;">
			<legend>想要了解我？</legend>
		</fieldset>

		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title layui-font-20">
				<li class="layui-this layui-font-20">个人基本资料</li>
				<li class="layui-font-20">自我介绍</li>
				<li class="layui-font-20">照片资料</li>
				<li class="layui-font-20">教育经历</li>
				<li class="layui-font-20">更多关于我</li>
			</ul>
			<div class="layui-tab-content" style="height: 100px;">
				<div class="layui-tab-item layui-show">
					<div id="" style="transform: translateX(17%);">
						<table width="750" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#666699">
							<tbody>
								<tr>
									<td width="10"></td>
									<td width="10" height="20"></td>
									<td width="10" height="20"></td>
									<td width="10" height="20"></td>
								</tr>

								<tr>
									<td></td>
									<td>
										<table width="100%" border="0" cellpadding="0" cellspacing="10"
											class="l-r-b-1pxline" align="center">
											<tbody>
												<tr>
													<td width="25%">
														<table width="26%" border="0" cellpadding="0" cellspacing="0"
															class="l-r-t-b-1pxline">
															<tbody align="center">
																<tr>
																	<td><img src="images/myself/person.jpg" width="180"
																			height="200" class="pimg"></td>
																</tr>
															</tbody>
														</table>
													</td>
													<td width="75%">
														<table width="100%" height="180" border="0" cellpadding="0"
															cellspacing="0" style="margin-left: 30px;">
															<tbody>
																<tr>
																	<td width="25%">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</td>
																	<td width="25%">赵李</td>
																	<td width="30%">性&nbsp;&nbsp;&nbsp;&nbsp;别：</td>
																	<td width="40%">男</td>
																</tr>
																<tr>
																	<td>年&nbsp;&nbsp;&nbsp;&nbsp;龄：</td>
																	<td>21</td>
																	<td>体&nbsp;&nbsp;&nbsp;&nbsp;重：</td>
																	<td>55kg</td>
																</tr>
																<tr>
																	<td>身&nbsp;&nbsp;&nbsp;&nbsp;高：</td>
																	<td>170cm</td>
																	<td>爱&nbsp;&nbsp;&nbsp;&nbsp;好：</td>
																	<td>安静听歌</td>
																</tr>
																<tr>
																	<td>出生年月：</td>
																	<td>1999-11-1</td>
																	<td>民&nbsp;&nbsp;&nbsp;&nbsp;族：</td>
																	<td>汉</td>
																</tr>
																<tr>
																	
																	<td>出生地区：</td>
																	<td>贵州遵义</td>
																	<td>学&nbsp;&nbsp;&nbsp;&nbsp;历：</td>
																	<td>大专</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>
											</tbody>
										</table>
									</td>
									<td></td>
								</tr>
								<tr>
									<td height="30" colspan="4" align="center"
										style="color: #99CC00;font-family: '隶书';font-size: 30px;">家乡照片(部分)</td>
								</tr>
								<tr>
									<td colspan="4">
										<table width="100%" border="0" cellpadding="0" cellspacing="0"
											class="r-t-b1pxline">
											<tbody>
												<tr>
													<td width="30%"><img src="images/hometown/river1.jpeg" width="128"
															height="100" class="pimg"></td>
													<td width="30%"><img src="images/hometown/river2.jpeg" width="128"
															height="100" class="pimg"></td>
													<td width="30%"><img src="images/hometown/overall3.jpeg" width="128"
															height="100" class="pimg"></td>
													<td width="30%"><img src="images/hometown/overall5.jpeg" width="128"
															height="100" class="pimg"></td>
												</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td height="10"></td>
									<td height="10"></td>
									<td height="10"></td>
									<td height="10"></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="layui-tab-item">
					<p style="color:#FF9999;">
						我叫赵李，今年21岁 来自移动应用开发1901班。家乡在贵州省遵义市下面的一个小县城里，今年大三了，不打算专升本，希望毕业后自己能够从事自己现在所学的专业。
						就在周围的城市里当个普普通通的程序猿,离朋友近些，离爸妈近些，离家乡近些，理想的
						工作地方是重庆、成都酱纸...
					</p>
					<p style="color:#993366;">
						我的身高不高不矮，体型不胖偏瘦；性格开朗， 相貌虽不比潘安，却性格温和。时常帮助同学解决疑
						难问题。在广大同学之间深受好评！因此获得荣誉称号：“赵雷锋”！你不信？以下评价均来自
						于同学、朋友的真实评价！
					<div>
						<br>
						<i>他是一个内心充满了正义感的人，是一个道德的人，是一个高尚的人。世间的松柏不如他的
							脊背；波涛汹涌的大海也不及他的胸怀；我被他深深的折服，他就是我的榜样；他就是我
							努力追赶的方向！------罗某龙
							<br>
						</i>
					</div>
					<div>
						<br>
						<i>曾经我体验过堕落的黑暗，我曾幻想我这一生都不曾再见光明，直到他出现在我的生命里，
							我方才醒来；不愿一生平平淡淡，只求跟随他的步伐，紧跟于他的身后。朝着有他的光明 奋力追赶！
							于是我奋笔疾书，以古人头悬梁，坐刺骨之毅力；以柏杨抗风沙，不畏烈日之精神努力学习，相信
							在未来的某一天，我能和他一起拥有各自美好的未来！------杨星星
							<br>
						</i>
					</div>
					<div>
						<br>
						<i>他这人吧，有一点挺好，那就是人挺好；同学遇到难题，总是会帮助一下；即便是解决不了，也会
							网上帮忙找找解决方法；但他这人吧，又有一点不好，那就是没什么不好。都说君子之交淡如水，两年
							多来，为人淡雅，与人相处谦和有礼。芝兰入室而香，我想说有他真好。------张小运
							<br>
						</i>
					</div>
					<div>
						<br>
						<i>我第一次见他，是他的帅气脸庞吸引住了我，我挪不开看他的眼睛，仿佛是他身上有一股莫名的吸引力，
							就像恒星围绕着卫星一样，不自觉的便跌进他的引力圈。我曾思索：他有何魅力，让我沉迷？如今的我豁然
							开朗，原来是他的风度翩翩，原来是他的侃侃而谈，原来是他的幽默风趣，原来是他的人格魅力......------蔡某某
							<br>
						</i>
					</div>
					<div>
						<br>
						<i>他就像夏夜的和风，那么柔，那么柔；春天的微风虽柔，却仍带一丝冷冽；夏天总是带着一种狂躁，所以
							就连它的风也一样，席卷着热浪，向人扑来；秋天的风，不能伤人身体的分毫，却总是伤人的心，令人郁郁寡欢，
							终日愁容满面；冬天，从前与风作伴的大雪，也各自而飞，孤寂的冬天只剩风儿与稀寥的几片雪花儿。
							于是，风儿含恨，吹冻人们的身心。唯有他，总是那么柔，那么柔。------谭小亮
							<br>
						</i>
					</div>
					<div>
						<br>
						<i>与他相识五年，但我俩关系仍坚如铁。彼此畅所欲言，他仍是我的挚友，我仍是他知己，虽不能时常一起，
							我俩见面时却一如以往，微笑而对，因为于彼此而言，他仍是他，我仍是我，均未曾改变。------吴江江
							<br>
						</i>
					</div>
					</p>
					<p style="color:palegreen;">
						<br>
						感谢以上各位同学与朋友对我的评价，感谢这路上与你们相识、相知，也祝愿我们的未来更加美好！
					</p>
					<p style="color:palegreen;">
						我还喜欢小动物，我特别喜欢一种名叫“杰鸽”的小动物，它喜欢以一种名叫“槟槟”的植物为食，
						因为这种名叫“槟槟”的植物一咬就脆，一嚼就碎，且容易发酵产生酒精让“杰鸽”这种小动物吃醉。
						所以人们常说“槟槟”就是醺了，也就说的是这类植物。为了防止“杰鸽”这种小动物吃“槟槟”而醉死，
						人们又想到一种方法，那就是买上一瓶阿伟品牌的“耗子尾汁”，在“杰鸽”飞回南方时，提前在“槟槟”
						这种植物上打上一瓶“耗子尾汁”的药水，使其提前发酵凋落。
					</p>
					<p style="color:palegreen;">
						“杰鸽”真的是很聪明的一种小动物，无论你在哪里放飞“杰鸽”，只要你带它去过一个地方，比如学校。
						它都能够找到你，因为它知道你读哪个学校，你读哪个年级、哪一个班。
					</p>
					<p style="color:#FFCC00;">
						我还喜欢四处走走，感受不同地方、不同景色带给我的不同感受。即便是同样的地点，但在不同的时间，
						心怀不同的心情再次感受时，也同样会给人以一种全新的触动。
					</p>
					<p style="color:#CC3399;">
						感谢大家聆听我的自我介绍！
					</p>
				</div>
				<div class="layui-tab-item">
					<div class="layui-row">
						<div class="layui-col-md3" style="margin-left: 60px;">
							<span>
								<img src="images/hometown/tree.jpeg" alt="图片走丢了" width="150px" height="200px"
									class="pimg"><br>
								<span style="padding-top: 20px;">
									<br>
									<button data-method="notice" class="layui-btn layui-btn-sm">
										<span class="layui-icon layui-icon-heart-fill"
											style="font-size: 13px; color: red;"></span>&nbsp;喜欢
									</button>
									<button data-method="notice" class="layui-btn layui-btn-warm layui-btn-sm">
										<span class="layui-icon layui-icon-praise"
											style="font-size: 13px; color: #FFFFFF;"></span>&nbsp;点赞
									</button>
								</span>
							</span>
						</div>
						<div class="layui-col-md3">
							<span>
								<img src="images/hometown/overall2.jpeg" alt="图片走丢了" width="150px" height="200px"
									class="pimg"><br>
								<span style="padding-top: 20px;">
									<br>
									<button data-method="notice" class="layui-btn layui-btn-sm">
										<span class="layui-icon layui-icon-heart-fill"
											style="font-size: 13px; color: red;"></span>&nbsp;喜欢
									</button>
									<button data-method="notice" class="layui-btn layui-btn-warm layui-btn-sm">
										<span class="layui-icon layui-icon-praise"
											style="font-size: 13px; color: #FFFFFF;"></span>&nbsp;点赞
									</button>
								</span>
							</span>
						</div>
						<div class="layui-col-md3">
							<span>
								<img src="images/hometown/overall3.jpeg" alt="图片走丢了" width="150px" height="200px"
									class="pimg"><br>
								<span style="padding-top: 20px;">
									<br>
									<button data-method="notice" class="layui-btn layui-btn-sm">
										<span class="layui-icon layui-icon-heart-fill"
											style="font-size: 13px; color: red;"></span>&nbsp;喜欢
									</button>
									<button data-method="notice" class="layui-btn layui-btn-warm layui-btn-sm">
										<span class="layui-icon layui-icon-praise"
											style="font-size: 13px; color: #FFFFFF;"></span>&nbsp;点赞
									</button>
								</span>
							</span>
						</div>
						<div>
							<span>
								<img src="images/hometown/river1.jpeg" alt="图片走丢了" width="150px" height="200px"
									class="pimg"><br>
								<span style="padding-top: 20px;">
									<br>
									<button data-method="notice" class="layui-btn layui-btn-sm">
										<span class="layui-icon layui-icon-heart-fill"
											style="font-size: 13px; color: red;"></span>&nbsp;喜欢
									</button>
									<button data-method="notice" class="layui-btn layui-btn-warm layui-btn-sm">
										<span class="layui-icon layui-icon-praise"
											style="font-size: 13px; color: #FFFFFF;"></span>&nbsp;点赞
									</button>
								</span>
							</span>
						</div><br>
						<div class="layui-col-md3" style="margin-left: 60px;">
							<span>
								<img src="images/hometown/overall5.jpeg" alt="图片走丢了" width="150px" height="200px"
									class="pimg"><br>
								<span style="padding-top: 20px;">
									<br>
									<button data-method="notice" class="layui-btn layui-btn-sm">
										<span class="layui-icon layui-icon-heart-fill"
											style="font-size: 13px; color: red;"></span>&nbsp;喜欢
									</button>
									<button data-method="notice" class="layui-btn layui-btn-warm layui-btn-sm">
										<span class="layui-icon layui-icon-praise"
											style="font-size: 13px; color: #FFFFFF;"></span>&nbsp;点赞
									</button>
								</span>
							</span>
						</div>
						<div class="layui-col-md3">
							<span>
								<img src="images/hometown/overall6.jpeg" alt="图片走丢了" width="150px" height="200px"
									class="pimg"><br>
								<span style="padding-top: 20px;">
									<br>
									<button data-method="notice" class="layui-btn layui-btn-sm">
										<span class="layui-icon layui-icon-heart-fill"
											style="font-size: 13px; color: red;"></span>&nbsp;喜欢
									</button>
									<button data-method="notice" class="layui-btn layui-btn-warm layui-btn-sm">
										<span class="layui-icon layui-icon-praise"
											style="font-size: 13px; color: #FFFFFF;"></span>&nbsp;点赞
									</button>
								</span>
							</span>
						</div>
						<div class="layui-col-md3">
							<span>
								<img src="images/hometown/river2.jpeg" alt="图片走丢了" width="150px" height="200px"
									class="pimg"><br>
								<span style="padding-top: 20px;">
									<br>
									<button data-method="notice" class="layui-btn layui-btn-sm">
										<span class="layui-icon layui-icon-heart-fill"
											style="font-size: 13px; color: red;"></span>&nbsp;喜欢
									</button>
									<button data-method="notice" class="layui-btn layui-btn-warm layui-btn-sm"
										onclick="praise()">
										<span class="layui-icon layui-icon-praise"
											style="font-size: 13px; color: #FFFFFF;"></span>&nbsp;点赞
									</button>
								</span>
							</span>
						</div>
						<div>
							<span>
								<img src="images/hometown/tree.jpeg" alt="图片走丢了" width="150px" height="200px"
									class="pimg"><br>
								<span style="padding-top: 20px;">
									<br>
									<button data-method="notice" class="layui-btn layui-btn-sm">
										<span class="layui-icon layui-icon-heart-fill"
											style="font-size: 13px; color: red;"></span>&nbsp;喜欢
									</button>
									<button data-method="notice" class="layui-btn layui-btn-warm layui-btn-sm">
										<span class="layui-icon layui-icon-praise"
											style="font-size: 13px; color: #FFFFFF;"></span>&nbsp;点赞
									</button>
								</span>
							</span>
						</div>
					</div>
				</div>
				<div class="layui-tab-item">
					<ul class="layui-timeline">
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis"></i>
							<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title" style="color: white;">2007年9月1日-2013年8月24日：小学时期</h3>
								<p style="color: #FF9999;">
									在校期间表现良好，该吃吃，该喝喝；一天睡觉身体好。不打电子游戏，只玩玻璃小球<em>
										（“三年级以前”）</em>，所以视力良好。每天上课6小时，休息娱乐占一半。成绩好坏参半，
									会的就做，不会就看着办，实在不行同桌考试瞟两眼。彼此都懂，有来有往才能合作长久。
									钦佩少时的自己，年纪轻轻，却已能懂得互惠互利、合作共赢。心怀世界大格局。
								</p>

								
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis"></i>
							<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title" style="color: white;">2013年9月1日-2016年7月15日：初中时期</h3>
								<p style="color: #0099CC;">
									十二三岁的年纪，便展现出这个年纪不应有的帅气与魅力；周杰伦的这个年纪也无法
									与我的帅气相比。鲜花因我的帅气开得更加鲜艳；蜜蜂因我的帅气而变得更加勤劳；
									最为我魅力所折服的是那挺立的松柏，只愿我的帅气不减，而四季常青......
								</p>
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis"></i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title" style="color: white;">2016年9月1日-2019年7月15日：高中时期</h3>
								<p style="color: #FFFF00;">
									在重庆工商学校里，为人正直，深受老师和同学的信任；于2019年顺利毕业！
								</p>
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis"></i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title" style="color: white;">2019年9月1日-2022年7月*日：大学时期</h3>
								<p style="color: #00FF00;">
									毕业于重庆电子工程职业学院，就读专业班级<em>
										<font color="red">“移动应用开发1901”</font>
									</em>，
									作为班级的颜值担当，极大的提升了班级的整体颜值水平，而光荣毕业！
								</p>
							</div>
						</li>
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis"></i>
							<div class="layui-timeline-content layui-text">
								<div class="layui-timeline-title" style="color: white;">没有更多叙述了</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="layui-tab-item">
					<h1 align="center" style="color: #CCFFFF;">请付费了解
						<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: red;"></i>(<font
							size="3" color="#FFFF00">多少全凭心意，应该不会很小气吧？扫描不出？点击图片放大</font>)
						<button style="align-content: center;" class="layui-btn layui-btn-primary layui-border-red"
							id="pay">我已支付？</button>
						<img src="images/myself/aboutme.jpg" id="image" width="200px;" height="200px;" />
					</h1><br>
					<div class="layui-col-md3" style="margin-left: 130px;">
						<span>
							<img src="images/pay/qqpay.png" alt="图片走丢了" width="150px" height="200px" class="pimg"><br>
						</span>
					</div>
					<div class="layui-col-md3" style="margin-left: 60px;">
						<span>
							<img src="images/pay/wechatpay.png" alt="图片走丢了" width="150px" height="200px" class="pimg"><br>
						</span>
					</div>
					<div class="layui-col-md3" style="margin-left: 60px;">
						<span>
							<img src="images/pay/alipay.jpg" alt="图片走丢了" width="150px" height="200px" class="pimg"><br>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 图片放大 -->
	<div id="outerdiv"
		style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
		<div id="innerdiv" style="position:absolute;">
			<img id="bigimg" style="border:5px solid #fff;" src="" />
		</div>
	</div>

	<!-- 随机播放音频 -->
	<script type="text/javascript" src="js/player.js"></script>
	<!-- 烟花特效 -->
	<script type="application/javascript" src="js/firework.js"></script>
	
</body>
</html>
